<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :model="searchParm" :inline="true" size="default">
            <el-form-item>
                <el-input v-model="searchParm.adminName" placeholder="请输入账户"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="searchBtn">搜索</el-button>
                <el-button icon="Close" type="danger" plain @click="resetBtn">重置</el-button>
                <el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>


            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column prop="adminRealname" label="姓名"></el-table-column>
            <el-table-column prop="adminGender" label="性别">
                <template #default="scope">
                    <el-tag v-if="scope.row.adminGender == '1'" type="danger" effect="dark">女
                    </el-tag>
                    <el-tag v-if="scope.row.adminGender == '0'" effect="dark">男</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="adminPhone" label="电话"></el-table-column>
            <el-table-column prop="adminName" label="账户"></el-table-column>
            <el-table-column prop="adminState" label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.adminState == '1'" type="danger" effect="dark">停用</el-tag>
                    <el-tag v-if="scope.row.adminState == '0'" effect="dark">启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220" align="center">
                <template #default="scope">
                    <el-button type="primary" icon="Edit" size="default" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange"
            :current-page.sync="searchParm.currentPage" :page-sizes="[10, 20, 40, 80, 100]"
            :page-size="searchParm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="searchParm.total"
            background>
        </el-pagination>
        <SysDialog :title="dialog.title" :visible="dialog.visible" :height="dialog.height" :width="dialog.width"
            @on-close="onClose" @on-confirm="commit" append-to-body :close-on-click-modal="false">
            <template v-slot:content>
                <!-- 弹框的内容 -->


                <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false"
                    size="default">

                    <el-form-item prop="adminRealname" label="真实姓名">
                        <el-input v-model="addModel.adminRealname"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminAge" label="真实年龄">
                        <el-input v-model="addModel.adminAge"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminGender" label="性别">
                        <el-radio-group v-model="addModel.adminGender">
                            <el-radio :label="'0'">男</el-radio>
                            <el-radio :label="'1'">女</el-radio>

                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="adminPhone" label="电话">
                        <el-input v-model="addModel.adminPhone"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminName" label="账号">
                        <el-input v-model="addModel.adminName"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminPassword" label="密码">
                        <el-input v-model="addModel.adminPassword"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminState" label="状态">
                        <el-radio-group v-model="addModel.adminState">
                            <el-radio :label="'0'">启用</el-radio>
                            <el-radio :label="'1'">下架</el-radio>

                        </el-radio-group>
                    </el-form-item>

                </el-form>


            </template>

        </SysDialog>
    </el-main>
</template>

<script setup lang="ts">
//向前端发起请求
// import axios from 'axios';
import { reactive, ref, onMounted } from 'vue'
import SysDialog from '@/components/SysDialog.vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { addAdminUserApi, getListApi, editApi, deleteApi } from '@/api/admin/index'
import { Admin } from '@/api/admin/AdminModel'
import useDialog from "@/hooks/useDialog";
import { Title } from '@/type/BaseEnum'
import { nextTick } from 'vue'
import useInstance from "@/hooks/useInstance"


//获取全局属性
const { global } = useInstance()

// //发起请求
// const add=axios.post('http://localhost:8080/login', {
//     userName: 'agoni',
//     userPassword: 'zxy123456'
// })
//     .then(function (response) {
//         console.log("成功了");
//     })
//     .catch(function (error) {
//         console.log(error);
//     });

//表单ref属性
const addRef = ref<FormInstance>()

//搜索绑定的对象
const searchParm = reactive({
    adminName: "",
    pageSize: 10,
    currentPage: 1,
    total: 0
});
//表格高度
const tableHeight = ref(0)
//表格数据
const tableList = ref([])

const tags = ref('')


//新增按钮
const { dialog, onClose } = useDialog()
const addBtn = () => {
    tags.value = '0'
    dialog.title = Title.EDIT
    dialog.height = 300;
    dialog.visible = true;
    //清空表单
    addRef.value?.resetFields()
}

//新增表单的对象

const addModel = reactive({
    id: null,
    adminRealname: "",
    adminPassword: "",
    adminName: "",
    adminAge: "",
    adminPhone: "",
    adminGender: "",
    adminState: "",
});
//表单验证规则
const rules = {
    adminRealname: [
        { required: true, message: '请输入姓名', trigger: 'blur' }

    ],
    adminGender: [
        { required: true, message: '请输入性别', trigger: 'blur' }

    ],
    adminAge: [
        { required: true, message: '请输入年龄', trigger: 'blur' }

    ],
    adminPhone: [
        { required: true, message: '请输入电话', trigger: 'blur' }

    ],
    adminName: [
        { required: true, message: '请输入账户', trigger: 'blur' }

    ],
    adminPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' }

    ],
    adminState: [
        { required: true, message: '请输入状态', trigger: 'blur' }

    ],
}

//表单提交
const commit = () => {
    //表单验证
    addRef.value?.validate(async (valid) => {
        if (valid) {
            console.log(addModel)
            let res = null;
            if (tags.value == '0') {
                res = await addAdminUserApi(addModel);
            } else {
                res = await editApi(addModel);
            }
            if (res && res.code == 200) {
                ElMessage.success(res.msg)
                //刷新表格
                getList()
                //关闭
                dialog.visible = false;
            }
        }
    });
}
//列表查询
const getList = async () => {
    let res = await getListApi(searchParm)
    console.log(res)
    if (res && res.code == 200) {
        console.log(res)
        tableList.value = res.data.rows;
        searchParm.total = res.data.total;
    }
}
//编辑
const editBtn = (row: Admin) => {
    tags.value = '1'
    console.log(row)
    dialog.title = Title.EDIT
    dialog.height = 300;
    dialog.visible = true;

    nextTick(() => {
        //数据回显
        Object.assign(addModel, row)
    })

}
//删除
const deleteBtn = async (row: Admin) => {
    console.log(row)
    //信息提示
    const confirm = await global.$myconfirm('确定删除这个数据吗')
    if (confirm) {
        let res = await deleteApi(row.id)

        if (res && res.code == 200) {
            ElMessage.success(res.msg)
            getList()
        }
    }
}
//搜索
const searchBtn = () => {
    getList()
}
//重置
const resetBtn = () => {
    searchParm.adminName = ''
    getList()
}
//页容量改变时触发
const sizeChange = (size: number) => {
    searchParm.pageSize = size;
    getList()
    console.log(size)
}
//页数改变时触发
const currentChange = (page: number) => {
    searchParm.currentPage = page
    getList()
    console.log(page)
}
onMounted(() => {
    //计算表格高度
    tableHeight.value = window.innerHeight - 200
    getList()
})

</script>

<style lang="scss" scoped></style>@/api/admin/index@/api/admin/AdminModel